<template>
  <view class="box p-x-32 p-y-26">
    <uv-navbar placeholder title="订单详情" @leftClick="leftClick"></uv-navbar>
    <view class="flex" v-if="orderData?.order_info.status == 1">
      <view>
        <uv-image width="78rpx" height="78rpx" :src="ASSETSURL + 'delivery.png'"></uv-image>
      </view>
      <view class="m-l-14">
        <view class="font-28 font-weight-bold"> 待发货 </view>
        <view class="font-24 m-t-10"> 已下单等待平台发货 </view>
      </view>
    </view>
    <view class="flex" v-if="orderData?.order_info.status == 2">
      <view>
        <uv-image width="78rpx" height="78rpx" :src="ASSETSURL + 'delivery_02.png'"></uv-image>
      </view>
      <view class="m-l-14">
        <view class="font-28 font-weight-bold"> 待收货 </view>
        <view class="font-24 m-t-10"> 已下单等待平台发货 </view>
      </view>
      <view class="m-l-auto m-t-auto" @click="logisticsDetails">
        <uv-image width="148rpx" height="41rpx" :src="ASSETSURL + 'logistics.png'"></uv-image>
      </view>
    </view>
    <view class="flex" v-if="orderData?.order_info.status == 3">
      <view>
        <uv-image width="78rpx" height="78rpx" :src="ASSETSURL + 'delivery_03.png'"></uv-image>
      </view>
      <view class="m-l-14">
        <view class="font-28 font-weight-bold"> 已完成 </view>
        <view class="font-24 m-t-10"> 已下单等待平台发货 </view>
      </view>
      <view class="m-l-auto m-t-auto" @click="logisticsDetails">
        <uv-image width="148rpx" height="41rpx" :src="ASSETSURL + 'logistics.png'"></uv-image>
      </view>
    </view>
    <view class="address p-x-26 p-y-32 m-t-30">
      <view class="flex aling-ali">
        <view>
          <uv-image width="38rpx" height="38rpx" :src="ASSETSURL + 'positioning.png'"></uv-image>
        </view>
        <view class="font-28 m-l-10">
          {{ orderData?.address_info.name }}
        </view>
        <view class="font-24 text-greey m-l-24">
          {{ orderData?.address_info.phone }}
        </view>
      </view>
      <view class="font-32 font-weight-bold m-t-22">
        {{ orderData?.address_info.address }}
      </view>
    </view>
    <view class="m-t-24 p-24 mallProd" v-if="orderData?.product_list">
      <view class="mallProd2 flex m-b-20" v-for="(item, index) in orderData.product_list" :key="index">
        <view>
          <uv-image width="192rpx" height="192rpx" :src="item.image" radius="12rpx"></uv-image>
        </view>
        <view class="flex-1 flex-col m-l-20">
          <view class="font-30 flex justify-bet align-ali">
            <view> {{ item.product_name }}</view>
            <view class="font-24 text-840202" v-if="item.add_type == 2" @click="details.open(item)">规格详情</view>
          </view>
          <view class="flex m-t-25 flex-wrap" v-if="item.add_type == 1">
            <view class="content font-28 m-r-20 p-x-14 p-y-6" v-for="(item2, index2) in item.suk?.split(',')"
              :key="index2">
              {{ item2 }}
            </view>
          </view>

          <view class="m-b-30 m-t-10 " style="gap: 20rpx" v-else>
            <view class="font-26 font-weight-middle"> 实际周长:{{ item.reality_size }}cm
            </view>
            <view class="font-26 m-t-10 font-weight-middle"> {{ item.suk.line.product_name }}({{ item.suk.line.suk
            }}){{ item.total_number || '0' }}颗珠子
              <!-- {{item.suk.materials.map(item2 => item2.product_name + 'x'
                +
                item2.number).join('、')}} -->
            </view>
          </view>
          <view class="flex m-t-28 justify-bet align-ali">
            <view class="font-26"> x{{ item.number }} </view>
            <view class="font-26 font-weight-bold">
              ￥{{ (item.number * item.price) / 100 }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="discountCoupons m-t-24 p-26">
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey"> 商品总价 </view>
        <view class="font-28">
          ￥{{ orderData?.price_info.total_price / 100 }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey"> 运费 </view>
        <view class="font-28">
          ￥{{ orderData?.price_info.freight_price / 100 }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali"
        v-if="orderData?.product_list.some(item => item.add_type == 2) && gurationData?.status == 0">
        <view class="font-28 text-greey"> 制作费 </view>
        <view class="font-28">
          ￥{{ gurationData?.price / 100 }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey"> 优惠券 </view>
        <view class="font-28">
          ￥{{ orderData?.price_info.coupon_price / 100 }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey"> 实付金额 </view>
        <view class="font-28">
          ￥{{ orderData?.price_info.pay_price / 100 }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey"> 支付时间 </view>
        <view class="font-28">
          {{ timeFormat(orderData?.time_info.pay_time, 'yyyy-mm-dd hh:MM:ss') }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey"> 订单编号 </view>
        <view class="font-28">
          {{ orderData?.order_info.order_sn }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey"> 订单状态 </view>
        <view class="font-28">
          <!-- {{ ['取消订单', '待支付', '待发货', '待收货', '已收货', '申请退款', '退款通过', '退款未通过', '已评价'][orderData?.order_info.status - 1] }} -->
          {{ orderData?.order_info.status_text }}
        </view>
      </view>
      <view class="m-t-30" v-if="orderData?.delivery_info.delivery_company">
        <view class="flex m-t-30 justify-bet align-ali">
          <view class="font-28 text-greey"> 物流公司 </view>
          <view class="font-28">
            {{ orderData?.delivery_info.delivery_company }}
          </view>
        </view>
        <view class="flex m-t-30 justify-bet align-ali">
          <view class="font-28 text-greey"> 快递单号 </view>
          <view class="font-28">
            {{ orderData?.delivery_info.delivery_sn }}
          </view>
        </view>
        <view class="flex m-t-30 justify-bet align-ali" v-if="orderData?.time_info.send_time">
          <view class="font-28 text-greey"> 发货时间 </view>
          <view class="font-28">
            {{
              timeFormat(orderData?.time_info.send_time, 'yyyy-mm-dd hh:MM:ss')
            }}
          </view>
        </view>
        <view class="flex m-t-30 justify-bet align-ali" v-if="orderData?.time_info.take_time">
          <view class="font-28 text-greey"> 收货时间 </view>
          <view class="font-28">
            {{
              timeFormat(orderData?.time_info.take_time, 'yyyy-mm-dd hh:MM:ss')
            }}
          </view>
        </view>
      </view>
    </view>
    <specificationDetails ref="details"></specificationDetails>
  </view>
</template>

<script setup>
import { orderDetail, getConfiguration } from '@/api/api';
import { ref, onMounted, reactive, getCurrentInstance } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady, onLoad, onUnload } from '@dcloudio/uni-app';
import { os, sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
const orderSn = ref(null); // 订单编号
const orderData = ref(null); // 订单详情
const gurationData = ref(null);//获取基础信息
const add_type = ref(null);// 1  商城过来的 2设计过来的 没有 购物车来的
const details = ref(null);
const { proxy } = getCurrentInstance();
onLoad((ope) => {
  if (ope.orderSn) {
    orderSn.value = ope.orderSn;
    orderDetails();
  }
  if (ope.add_type) {
    add_type.value = ope.add_type;
  }
  getConfigurations()
});
const leftClick = () => {
  if (add_type.value == 1 || add_type.value == 2) {
    uni.navigateBack({ delta: 2 })
  } else {
    uni.navigateBack()
  }

  // route({ url: '/pagesA/pages/originality/myOrder', type: 'launch' })
  // route.back()
  // proxy.$tool.jump_back()
}
// onUnload(() => {
//   console.log('离开页面,返回上一级');
//   leftClick()
// })
//获取基础信息
const getConfigurations = () => {
  getConfiguration({ type: 4 }).then((res) => {
    console.log(res, '基础信息');
    gurationData.value = res.data;
  })
}
//物流详情
const logisticsDetails = () => {
  route('/pagesA/pages/originality/returnLogistics', {
    orderSn: orderSn.value,
  });
};
//订单详情
const orderDetails = () => {
  orderDetail({
    order_sn: orderSn.value,
  }).then((res) => {
    console.log(res, '订单详情');
    orderData.value = res.data;
  });
};
</script>

<style lang="scss">
.box {
  min-height: 100vh;
  background-color: #f6f6f6;
}

.address {
  width: 686rpx;
  height: 178rpx;
  background: #fff;
  border-radius: 12rpx;

  .iconDeit {
    margin-left: auto;
  }
}

.mallProd {
  width: 686rpx;
  // height: 240rpx;
  background: #fff;
  border-radius: 12rpx;

  .mallProd2:last-child {
    margin-bottom: 0 !important;
  }

  .content {
    background: #f3f3f3;
    border-radius: 12rpx;
  }
}

.discountCoupons {
  width: 686rpx;
  // height: 216rpx;
  background: #fff;
  border-radius: 12rpx;

  view:first-child {
    margin-top: 0 !important;
  }

  .coupons {
    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 14rpx;
      height: 14rpx;
      border-radius: 50%;
      background: #000;
    }
  }

  .discount {
    width: 634rpx;
    height: 96rpx;
    background: #f6f6f6;
  }
}
</style>
